<template>
  <div class="phoneAndCode">
    <van-field
    v-model.trim="phone"
    required
    clearable
    autofocus
    maxlength="11"
    ref="phone"
    label="手机号码"
    right-icon="contact"
    placeholder="请输入手机号码"
    />
    <van-field
    v-model="smsCode"
    required
    center
    clearable
    maxlength="6"
    ref="smsCode"
    label="短信验证码"
    placeholder="请输入短信验证码"
    >
    <van-button 
        slot="button" 
        size="small" 
        type="primary"
        :loading="appLoading"
        :disabled="getSmsCodeStatus"
        loading-text="加载中"
        @click="getCheckCode"
    >{{smsCodeText}}</van-button>
    </van-field>
  </div>
</template>

<script>
  import { Field, Button } from 'vant';
  import { mapState, mapMutations } from 'vuex';

  export default {
    name: 'PhoneAndCode',
    components: {
      [Field.name]: Field,
      [Button.name]: Button,
    },
    props: {
    },
    data () {
      return {
        phone: '',
        smsCode: '',
        getSmsCodeStatus: false,
        smsCodeText:' 获取验证码',
        count: 60
      }
    },
    computed:{
      ...mapState ([
        'appLoading' // 将 this.appLoading 映射为 this.$store.state.appLoading
      ]),
      checkPhone () {//检查手机号正确性
        const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; //正则表达式验证手机号格式
        if (this.phone == '') return '手机号为空';
        if(phoneReg.test(this.phone)) return true;
        else return '手机号格式错误';
      },
      checkSmsCode () {//检查验证码正确性
        const smsCodeReg = /^[0-9]{4,6}$/; //判断验证码长度正则表达式，4-6位
        if (this.smsCode == '') return '验证码为空';
        if(smsCodeReg.test(this.smsCode)) return true;
        else return '验证码格式错误';
      }
    },
    created(){
    },
    methods:{
      ...mapMutations ([
        // 将 'this.updateAppLoading(obj)' 映射为 'this.$store.commit("updateAppLoading", obj)'
        'updateAppLoading', 
      ]),
      checkSubmit () {
        let phoneResult = this.checkPhone;
        let smsCodeResult = this.checkSmsCode;
        let reqParams = {
          phone: this.phone,
          smsCode: this.smsCode
        };
        if (!(typeof phoneResult == 'boolean' && phoneResult)){
          this.$UIplugins.message({message: phoneResult, type: 'error'});
        }else if (!(typeof smsCodeResult == 'boolean' && smsCodeResult)){
          this.$UIplugins.message({message: smsCodeResult, type: 'error'});
        }else{
          return {result: true, reqParams: reqParams};
        }
        return {result: false};
      },
      getCheckCode () {
				let phoneResult = this.checkPhone;
				if (!(typeof phoneResult == 'boolean' && phoneResult)){
					this.$UIplugins.message({message: phoneResult, type: 'error'});
				}else{
					this.getSmsCodeStatus = true;
					this.smsCodeText = " 发送中...";
					this.$api.user.sendSmsCode(this.phone, (res) => {
						if(res.status == 0) {
							this.getCodeBtnColor = "rgba(71,71,71,0.5)";
							this.countDown();
							this.$UIplugins.message({
								message: res.msg, 
								type: 'text'
							});
						}else {
							this.getSmsCodeStatus = false;
							this.smsCodeText = " 获取验证码";
						}
					})
        }
      },
      countDown () {
        if (this.count == 0) {
          this.getSmsCodeStatus = false;
          this.smsCodeText = " 获取验证码";
          this.count = 60;
          return false;
        } else {
          this.getSmsCodeStatus = true;
          this.smsCodeText= " 重新发送(" + this.count + ")";
          this.count --;
        }
        let countDown = this.countDown;
        setTimeout(function() {
          countDown();
        },1000);
      }
    }
  }
</script>

<style lang="scss">
  .phoneAndCode {
  }
</style>
